<script setup>
import { Postcard } from "@element-plus/icons-vue";
import "@/assets/iconfont/iconfont.js";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useStateStore,useReportStore } from "@/stores/counter.js";
import {basicAPI, certificateAPI, extractAPI} from "@/apis/anay.js";

const stateStore = useStateStore();
const reportStore = useReportStore();
const route = useRoute();
const apkInfo = ref({});
const loading = ref(true);
const loading2 = ref(true);
const cerInfo = ref({});

const loadData = (filepath) =>{
  const storedApk = sessionStorage.getItem('apkInfo');
  const storedCer = sessionStorage.getItem('cerInfo');
  if(storedApk && storedCer){
    apkInfo.value = JSON.parse(storedApk);
    loading.value = false;
    cerInfo.value = JSON.parse(storedCer);
    loading2.value = false
  }else {
    fetchDataApk(filepath);
    fetchDataCer(filepath);
  }
}

const fetchDataApk = async (filepath) =>{
  try{
    apkInfo.value = (await basicAPI(filepath)).data.data;
    reportStore.changeBasicReport(apkInfo.value)
    stateStore.changeInfo();

    sessionStorage.setItem('apkInfo',JSON.stringify(apkInfo.value));
    loading.value = false;
  }catch (error){
    console.error('Failed to fetch data',error);
  }
}

const fetchDataCer = async (filepath) =>{
  try{
    cerInfo.value = (await certificateAPI(filepath)).data.certificate;
    reportStore.changeCerReport(cerInfo.value)
    stateStore.changeCer();
    sessionStorage.setItem('cerInfo',JSON.stringify(cerInfo.value));
    loading2.value = false;

  }catch (error){
    console.error('Failed to fetch data',error);
  }
}

onMounted(async () => {
    const filepath = route.query.filepath;
    loadData(filepath)
});
</script>

<template>
  <el-card
    shadow="always"
    style="margin-bottom: 10px"
    v-loading="loading"
    element-loading-text="分析中..."
  >
    <template #header
      ><SvgIcon
        iconName="icon-xiangxixinxi1"
        style="margin-right: 5px"
      ></SvgIcon
      >详细信息</template
    >
    <div class="basic_info">
      <div style="display: flex; flex-direction: column; margin-bottom: 20px">
        <span style="font-weight: bold; margin-bottom: 15px">
          <SvgIcon iconName="icon-app-app" style="margin-right: 5px"></SvgIcon
          >App图标</span
        >
        <div class="detail">
          <img
            v-if="apkInfo.icon"
            :src="'data:image/png;base64,' + apkInfo.icon"
            alt="App Icon"
            width="100px"
            height="100px"
          />
        </div>
      </div>
      <div style="display: flex; flex-direction: column; margin-bottom: 20px">
        <span style="font-weight: bold; margin-bottom: 15px">文件信息</span>
        <div>
          <span class="badge">文件名 </span>{{ apkInfo.file_name || "N/A" }}
        </div>
        <div>
          <span class="badge">文件大小 </span
          >{{ parseFloat(apkInfo.app_size).toFixed(2) + "MB" || "N/A" }}
        </div>
        <div><span class="badge">MD5值 </span>{{ apkInfo.md5 || "N/A" }}</div>
        <div><span class="badge">SHA1值 </span>{{ apkInfo.sha1 || "N/A" }}</div>
        <div>
          <span class="badge">SHA256 </span>{{ apkInfo.sha256 || "N/A" }}
        </div>
      </div>
      <div style="display: flex; flex-direction: column">
        <span style="font-weight: bold; margin-bottom: 15px">APK信息</span>
        <div>
          <span class="badge">APK名称 </span>{{ apkInfo.app_name || "N/A" }}
        </div>
        <div>
          <span class="badge">版本号 </span>{{ apkInfo.version_code || "N/A" }}
        </div>
        <div>
          <span class="badge">版本名 </span>{{ apkInfo.version_name || "N/A" }}
        </div>
        <div>
          <span class="badge">包名 </span>{{ apkInfo.package_name || "N/A" }}
        </div>
      </div>
    </div>
  </el-card>

  <el-card
    shadow="always"
    style="margin-bottom: 10px"
    v-loading="loading2"
    element-loading-text="分析中..."
  >
    <template #header
      ><SvgIcon
        iconName="icon-zhengshuyanzhen"
        style="margin-right: 5px"
      ></SvgIcon
      >签名证书
    </template>

    <div class="detail2">
      <div class="basicHeader">
      <div class="mycard">
        <el-icon style="font-size: 70px"><Postcard /></el-icon>
        <div class="cer" v-if="cerInfo.validity === '合格'">
          <div class="val">{{ cerInfo.validity }}</div>
          <div class="val">{{ cerInfo.reason }}</div>
        </div>
        <div class="cer" v-else>
          <div class="val2">{{ cerInfo.validity }}</div>
          <div class="val2">{{ cerInfo.reason }}</div>
        </div>
      </div>
      <div class="finger">
        <SvgIcon
          class="zhiwen"
        iconName="icon-zhiwen"
        style="margin-right: 5px"
      ></SvgIcon
      >
        <span class="badge3">特征指纹</span>{{ cerInfo.fingerprint || "N/A" }}
      </div>
    </div>
      <div style="margin-left: 20px">APK已签名</div>
      <div>
        <span class="badge2"> V1签名</span>{{ cerInfo.v1_signature || "N/A" }}
      </div>
      <div>
        <span class="badge2"> V2签名</span>{{ cerInfo.v2_signature || "N/A" }}
      </div>
      <div>
        <span class="badge2"> V3签名</span>{{ cerInfo.v3_signature || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 主题</span>{{ cerInfo.cert_subject || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 唯一证书</span
        >{{ cerInfo.unique_certificates || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 签发者</span>{{ cerInfo.cert_issuer || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 序列号</span
        >{{ cerInfo.cert_serial_number || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 生效日期</span
        >{{ cerInfo.cert_not_valid_before || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 失效日期</span
        >{{ cerInfo.cert_not_valid_after || "N/A" }}
      </div>

      <div>
        <span class="badge2"> SHA-1</span>{{ cerInfo.cert_sha1 || "N/A" }}
      </div>
      <div>
        <span class="badge2"> SHA-256</span>{{ cerInfo.cert_sha256 || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 证书签名算法</span
        >{{ cerInfo.cert_signature_algorithm || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 证书哈希算法</span
        >{{ cerInfo.cert_hash_algorithm || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 证书公钥算法</span
        >{{ cerInfo.cert_public_key_algorithm || "N/A" }}
      </div>
      <div>
        <span class="badge2"> 证书密钥长度</span
        >{{ cerInfo.cert_key_length || "N/A" }}
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.finger{
  display: flex;
  align-items: center;
  font-size: 18px;
}
.basicHeader{
  display: flex;
  align-items: center;
}
.zhiwen{
  width: 50px;
  height: 50px;
  margin-left: 33px;
}
::v-deep .el-card__header {
  font-weight: bold;
  font-size: 20px;
}
.detail {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.badge {
  width: 60px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  margin-bottom: 5px;
  background-color: #dbe9f8;
  color: #429fff;
  padding: 0.25em 0.4em;
  margin-right: 5px;
  font-size: 13px;
}
.badge3{
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  margin-bottom: 5px;
  background-color: #fadfbc;
  color: #224f80;
  padding: 0.25em 0.4em;
  margin-right: 5px;
  font-size: 16px;
}
.el-card__header {
  font-weight: bold;
}
::v-deep .basic_info {
  display: flex;
  justify-content: space-between;
}
.info {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5px;
}
.info_basic {
  width: 200px;
  height: 40px;
  font-size: 15px;
  margin-top: 12px;
  color: grey;
}
.info_basic span {
  color: black;
  font-size: 16px;
}

.val {
  height: 35px;
  width: 190px;
  border-bottom: 2px solid #d28779;
  text-align: center;
  line-height: 35px;
  margin-left: 35px;
}

.val {
  height: 35px;
  width: 190px;
  border-bottom: 2px solid #90d79e;
  text-align: center;
  line-height: 35px;
  margin-left: 35px;
}

.cer {
  display: flex;
  flex-direction: column;
}
.mycard {
  margin-bottom: 10px;
  border-radius: 4px;
  border-color: #e4e7ed;
  width: 300px;
  border-style: solid;
  border-width: 2px;
  display: flex;
  padding: 0 10px;
  height: 76px;
}

.detail2 {
  display: flex;
  flex-direction: column;
}
.badge2 {
  width: 125px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  margin-bottom: 5px;
  background-color: #dbe9f8;
  color: #429fff;
  padding: 0.25em 0.4em;
  margin-right: 5px;
  font-size: 13px;
}
</style>